package com.example.kt_temp.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.kt_temp.ui.theme.Blue200
import com.example.kt_temp.ui.theme.Blue700
import com.google.accompanist.insets.LocalWindowInsets
import com.google.accompanist.systemuicontroller.rememberSystemUiController

//标题栏高度
val appBarHeight = 56.dp

@Composable
fun TopAppBar(modifier:Modifier=Modifier, content: @Composable ()->Unit) {

    val systemUiController = rememberSystemUiController()

    LaunchedEffect(key1 = Unit ){
        systemUiController.setStatusBarColor(Color.Transparent)
    }


    //转换状态栏高度px转换为dp
    val statusBarHeightDp = with(LocalDensity.current){
//        statusBarHeight.toDp()
        //也可已使用 accompanist.insets
        LocalWindowInsets.current.statusBars.top.toDp()
    }



    Row(modifier = Modifier
        .background(
            Brush.linearGradient(
                listOf(
                    Blue700,
                    Blue200,
                ))
        )
        .fillMaxWidth()
        .height(appBarHeight + statusBarHeightDp)
        .padding(top = statusBarHeightDp)
        .then(modifier),         //then修饰符可以合并传进来的modifier
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically
    ){
      content()
    }
}

@Preview(showBackground = true)
@Composable
fun TopAppBarPreview() {
    TopAppBar(){
        Text("标题")
    }
}